<template>
  <el-card class="box-card"
           shadow="never">
    <div class="oper-status"> {{titleName}} </div>
    <el-form ref="ruleForm"
             :model="ruleForm"
             :rules="rules"
             label-width="80px"
             class="demo-ruleForm">
      <el-row>
        <el-form-item label="计费单位"
                      prop="billingUnit">
          <el-select v-model="ruleForm.billingUnit"
                     :disabled="bargaDisable"
                     clearable
                     placeholder="请选择计费单位"
                     @input="handlerUnit">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起点城市"
                      prop="fromAddress">
          <el-col :span="24">
            <!-- <area-select v-model="ruleForm.startCity"
                         :disabled="bargaDisable"
                         :area-values="ruleForm.startCity"
                         type="code"
                         placeholder="请选择起点城市"
                         check-strictly
                         @confirm="changeFrom" /> -->
            <area-cascader v-model="ruleForm.fromAddress"
                           :disabled="bargaDisable"
                           :placeholder="`请选择起点城市`"
                           :props="props"
                           @input="changeFrom" />
          </el-col>
          <!-- <el-col :span="14">
            <el-input v-model="ruleForm.startAddress"
                      :disabled="bargaDisable || startCityDisabled"
                      placeholder="请输入详细地址" />
          </el-col> -->
        </el-form-item>
        <el-form-item prop="startAddress">
          <el-input v-model="ruleForm.startAddress"
                    :rows="2"
                    type="textarea"
                    :disabled="bargaDisable || startCityDisabled"
                    placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="目的城市"
                      prop="toAddress">
          <el-col :span="24">
            <!-- <area-select v-model="ruleForm.endCity"
                         :disabled="bargaDisable"
                         :area-values="ruleForm.endCity"
                         type="code"
                         placeholder="请选择目的城市"
                         check-strictly
                         @confirm="changeTo" /> -->
            <area-cascader v-model="ruleForm.toAddress"
                           :disabled="bargaDisable"
                           :placeholder="`请选择目的城市`"
                           :props="props"
                           @input="changeTo" />
          </el-col>
        </el-form-item>
        <el-form-item prop="endAddress">
          <el-input v-model="ruleForm.endAddress"
                    :rows="2"
                    type="textarea"
                    :disabled="bargaDisable || endCityDisabled"
                    placeholder="请输入详细地址" />
        </el-form-item>
        <el-col :span="24">
          <el-form-item label="时效"
                        prop="days">
            <el-input v-model="ruleForm.days"
                      :disabled="bargaDisable"
                      :min="1"
                      type="number"
                      placeholder="请输入时效天数">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="status"
                :span="24">
          <el-form-item label="备注"
                        prop="remarks">
            <el-input v-model="ruleForm.remarks"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="form-title">单位区间</div>
          <UnitValueComponent ref="unit"
                              :rows="ruleForm.pricingList"
                              v-bind="$attrs"
                              @verifyTableDataText="verifyTableDataText"
                              v-on="$listeners" />
          <!-- <el-form-item label="单位值">
            <UnitValueComponent ref="unit" />
          </el-form-item> -->
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary"
                   @click="submitForm('ruleForm')">保存</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// import AreaSelect from "@basic/area/AreaSelect";
import AreaCascader from "@basic/area/AreaCascader.vue";
import { options } from '../../options'
import UnitValueComponent from './UnitValueComponent.vue'

export default {
  name: 'AddCarloadForm',
  components: { AreaCascader, UnitValueComponent },
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    // bargaStatus: {
    //   type: [String, Number],
    //   default: null
    // },
    editStatus: {
      type: Boolean,
      default: false
    },
    status: {
      type: [String, Number],
      default: null
    }
  },
  data () {
    const validateAgingDays = (rule, value, callback) => {
      let pattern = /^[1-9]\d*$/;
      if (!value) {
        return callback(new Error('请输入时效天数'))
      }
      setTimeout(() => {
        if (Number(value) > 30) {
          return callback(new Error('时效天数只能输入1-30数字'))
        } else if (!pattern.test(value)) {
          return callback(new Error('只能输入整数'))
        }
        else {
          callback()
        }
      }, 100)
    }
    return {
      ruleForm: {
        billingUnit: '',
        // startCity: [],
        endCity: [],
        startAddress: '',
        endAddress: '',
        days: ''
      },
      options: options,
      startCityDisabled: true,
      endCityDisabled: true,
      textPromptList: [],
      props: {
        label: 'name',
        value: 'areaCode',
        checkStrictly: true
      },
      rules: {
        billingUnit: [{ required: true, message: '请选择计费单位', trigger: 'change' }],
        fromAddress: [{ required: true, message: '请选择起点城市', trigger: 'change' }],
        toAddress: [{ required: true, message: '请选择目的城市', trigger: 'change' }],
        startAddress: [{ max: 100, message: '最多输入100个字符', trigger: 'change' }],
        endAddress: [{ max: 100, message: '最多输入100个字符', trigger: 'change' }],
        days: [{ required: true, trigger: 'change', validator: validateAgingDays }]
      },
    }
  },
  computed: {
    statuss () {
      return Number(this.status)
    },
    bargaDisable () {
      return this.statuss === 3 ? false : this.statuss ? true : false
    },
    titleName () {
      let title = this.editStatus ? '编辑' : (this.status && this.status !== 3 ? '议价' : '新增');
      return title
    }
  },
  watch: {
    value: {
      handler ({ row }) {
        const { fromAddress, toAddress } = row;
        this.startCityDisabled = !(fromAddress?.districtCode);
        this.endCityDisabled = !(toAddress?.districtCode);
        this.ruleForm = row
        this.$refs.ruleForm.clearValidate()
      },
    },
    editStatus: {
      handler (value) {
        this.headTitle = value
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    verifyTableDataText (data) {
      const text = data.filter(item => item.text)
      this.textPromptList = text
    },
    submitForm (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const tableForm = this.$refs.unit.$refs.tableForm
          const tableFormValid = await tableForm.validate()
          if (tableFormValid && !this.textPromptList.length) {
            const modelData = tableForm.model.tableData
            this.assignmentFormPrice(modelData)
            const divideData = { ...this.ruleForm, pricingList: modelData }
            this.$emit('add', divideData)
          }
        } else {
          return false
        }
      })
    },
    assignmentFormPrice (pricingList) {
      pricingList.map((item, index) => {
        this.ruleForm[`price${index}`] = item.price
      })
    },
    handlerUnit (value) {
      const items = options.find(item => item.value === value)
      this.$emit('handlerUnit', { value: value, items: items })
    },
    changeFrom (value) {
      this.ruleForm.fromAddress = value

      if (value?.districtCode) {
        this.startCityDisabled = false
      } else {
        this.startCityDisabled = true
        this.ruleForm.startAddress = ''
      }
      // value.districtCode ? this.startCityDisabled = false : this.startCityDisabled = true
    },
    changeTo (value) {
      this.ruleForm.toAddress = value
      // value.districtCode ? this.endCityDisabled = false : this.endCityDisabled = true
      if (value?.districtCode) {
        this.endCityDisabled = false
      } else {
        this.endCityDisabled = true
        this.ruleForm.endAddress = ''
      }
    },
    // resetForm () {
    //   this.$refs.ruleForm.resetFields();
    // }
  }
}
</script>

<style scoped>
.demo-ruleForm .form-title {
  padding-bottom: 18px;
  /* padding-left: 25px; */
}
.oper-status {
  padding: 0 0 10px 10px;
  font-weight: bold;
  border-bottom: 1px solid var(--prev-border-color-extra-grey);
  margin-bottom: 20px;
}
</style>